<template>
    <el-row>
        <el-col :span="8">
            <el-form :model="userForm" ref="userForm" label-width="100px" label-position="left">

                <el-form-item label="账户名称:" prop="AccountName">
                    {{userForm.AccountName}}
                </el-form-item>

                <el-form-item label="应用系统:" prop="AppName">
                    {{userForm.AppName}}
                </el-form-item>

                <el-form-item label="OTP密钥:" prop="AppName">
                    <img v-bind:src="userForm.Qrcode" />
                    <div>{{userForm.Secret}}</div>
                </el-form-item>

                <el-form-item label="校验OTP:" prop="PassCode">
                    <el-input v-model="userForm.PassCode"></el-input>
                </el-form-item>

                <el-form-item class="text-right">
                    <el-button type="primary" @click="createOTP()">生成OTP密钥</el-button>
                    <el-button type="primary" @click="checkOTP()">校验OTP</el-button>
                    <router-link class="mb10 el-button el-button--danger" :to="{path:'/user/list'}">取消</router-link>
                </el-form-item>

            </el-form>
        </el-col>
    </el-row>
</template>
<style lang="less" scoped>

</style>
<script>
    import patterns from '../../util/patterns'
    import { mapActions } from 'vuex'
    import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";
    export default{
        data(){
            return{
                userForm: {
                    Id: 0,
                    AccountName:'',
                    AppName:'',
                    Qrcode:'',
                    Secret:'',
                    PassCode:''
                }
            }
        },
        components:{
          ElFormItem

        },
        computed: {

        },
        created () {
            this.getView()
        },
        methods: {
            ...mapActions(['setLoadingText']),
            getView() {
                this.$http.get('/user/get',{params: {id: this.$route.params.id}})
                .then(res => {
                    const msg = res.body;
                    if(msg.Success){
                        this.userForm = msg.Data;
                    } else {
                        this.$message.error({message: '获取用户信息失败!' });
                    }
                },res => {
                	  this.$message.error({message: '获取用户信息失败!' });
                })
            },
            postCreateOTP() {
                this.setLoadingText('正在提交...');
                this.$http.post('/user/otp/create', {id: this.$route.params.id})
                    .then(res => {
                        var msg = res.body;
                        if (msg.Success) {
                            this.$message.success({message: '生成成功'});
                            this.userForm.Qrcode = msg.Data.Qrcode;
                            this.userForm.Secret = msg.Data.Secret;
                        } else {
                            this.$message.error({message: '生成失败'});
                        }
                    }, res => {
                        this.$message.error({message: '生成失败'});
                    })
            },
            createOTP() {
            	  if (this.userForm.Qrcode) {
                    this.$confirm("确定重新生成OTP密钥吗？", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.postCreateOTP()
                    })
                }else{
                    this.postCreateOTP()
                }
            },
            checkOTP() {
                this.setLoadingText('正在提交...');
                this.$http.post('/user/otp/check', {id: this.$route.params.id, passCode: this.userForm.PassCode})
                    .then(res => {
                        var msg = res.body;
                        console.log(msg)
                        if (msg.Success) {
                          this.$message.success({message: '校验通过'});
                        } else {
                          this.$message.error({message: '校验失败'});
                        }
                    }, res => {
                        this.$message.error({message: '校验失败'});
                    })
            }
        }
    }
</script>
